<template>
    <div class="container-wrapper">
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="primary">测试实施</el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24">
                <div class="ibox">
                    <div class="ibox-content">
                        <div id="reportrange" class="form-control">
                            <div class="block">
                                <el-checkbox v-model="checked" class="mr-1"></el-checkbox>
                                <label class="col-form-label mr-1">时间段:</label>
                                <el-date-picker
                                    v-model="filters.date"
                                    type="daterange"
                                    align="right"
                                    size="mini"
                                    value-format="yyyy-MM-dd"
                                    :unlink-panels="true"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions"
                                    :disabled="!checked"
                                    class="mr-4">
                                </el-date-picker>
                                <label class="col-form-label mr-1" >{{datepicker_info.droplist1.title}}</label>
                                <el-select
                                    v-model="filters.select1"
                                    size="mini"
                                    style="width: 120px"
                                    class="mr-3">
                                    <el-option label="所有" value="all"></el-option>
                                    <el-option
                                        v-for="item in datepicker_info.droplist1.data"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <label class="col-form-label mr-1">{{datepicker_info.droplist2.title}}</label>
                                <el-select
                                    v-model="filters.select2"
                                    size="mini"
                                    style="width: 100px">
                                    <el-option label="所有" value="all"></el-option>
                                    <el-option
                                        v-for="item in datepicker_info.droplist2.data"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                                <!-- <el-button
                                    icon="el-icon-search" 
                                    size="small"
                                    type="primary"
                                    @click="search"
                                    class=""
                                    style="margin-left: 30px;margin-right: 5px;">
                                    搜索
                                </el-button> -->
                            </div>
                            
                        </div>
                    </div>
                </div>
            </el-col> 
        </el-row>
        <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="6">
                <LabelGrid :label_info="label_info.test_round" :label_data="getFix(label_data.t_task_id__count)"></LabelGrid>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6">
                <LabelGrid :label_info="label_info.test_pass_rate" :label_data="getFix2(label_data.t_pass_rate__avg)"></LabelGrid>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6">
                <LabelGrid :label_info="label_info.test_cover_rate" :label_data="getFix2(label_data.t_coverage_rate__avg)"></LabelGrid>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6">
                <LabelGrid :label_info="label_info.submit_bug" :label_data="getFix(label_data.t_bug_count__sum)"></LabelGrid>
            </el-col>
            <!-- <LabelGrid :label_info="label_info.testcase" :label_data="label_data.testcase_count"></LabelGrid> -->     
        </el-row>

        <chartvalidation :filters="filters"></chartvalidation>
    </div>
</template>
<script>
import DatePicker from '@/components/qa/DatePicker.vue';
import LabelGrid from '@/components/qa/Label.vue';
import ChartValidation from './ChartValidation.vue';

export default {
    name: 'TestExecution',
    components: {
        LabelGrid,
        chartvalidation: ChartValidation
    },
    data() {
        return {
            project_id: '',
            filters: {
                date: null,
                select1: 'all',
                select2: 'all',
            },
            checked: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            datepicker_info: {
                droplist1: {
                    title: '测试阶段：',
                    data: [
                        {name: '单元测试', value: 1},
                        {name: '集成测试', value: 2},
                        {name: '系统测试', value: 3}
                    ]
                },
                droplist2: {
                    title: '测试版本：',
                    data: ['Daily','Release']
                },
            },
            label_info: {
				// testcase: {
				// 	label_hname: '测试用例数量',
				// 	label_sname: 'Total',
				// 	label_unit: '(个)',
				// 	label_class: 'success'
				// },
				test_round: {
					label_hname: '测试轮数',
					label_sname: 'Total',
					label_unit: '(次)',
					label_class: 'success'
				},
				test_pass_rate: {
					label_hname: '测试通过率',
					label_sname: 'Total',
					label_unit: '(%)',
					label_class: 'success'
				},
				test_cover_rate: {
					label_hname: '测试覆盖率',
					label_sname: 'Total',
					label_unit: '(%)',
					label_class: 'success'
				},
				submit_bug: {
					label_hname: '提交缺陷',
					label_sname: 'Total',
					label_unit: '(个)',
					label_class: 'success'
				}
			},
            label_data: {},
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.getData();
            },
            deep: true,
        },

    },
    methods: {
        getData: function() {
            var time = this.filters.date;
            if (null == time || "undefined" == typeof(time)) {
                time = ''
            }
            var project = this.project_id;
            var testphase = this.filters.select1;
            console.log(testphase);
            var testversion = this.filters.select2;
            this.getTestExecutionSum(project, time, testphase, testversion);
        },
        getTestExecutionSum: function(project, time, testphase, testversion) {
            this.$axios.get(process.env.VUE_APP_KANBAN_HOST + 'api/qa/gettestexecutionsum?project='+project+'&time='+time+'&testphase='+testphase+'&testversion='+testversion)
                .then((response) => {
                    if (response.status == 200) {
                        // eslint-disable-next-line
                        // console.log(response.data.sum);
                        this.label_data = response.data.sum_label;
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getFix2: function(float) {
            if (null == float || "undefined" == typeof(float) || "" == float) {
                return 0;
            } else {
                return (float*100).toFixed(2)
            }
        },
        getFix: function(data) {
            if (null == data || "undefined" == typeof(data) || "" == data) {
                return 0;
            } else {
                return data
            }
        }
    },
    created: function() {
        this.project_id = this.$route.params.pmsProjectId;
    },
    mounted() {
        this.getData()
    }
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';

    .container-wrapper{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
    }
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
</style>
